<template>
  <div class="container">
    <template v-if="!getCustomerId">
      <get-user-info
        v-if="isGetUserInfo"
        :showBackBtn="true"
        @showPage="showPage"
        @authPhoneInfo="authPhoneInfo"
        @lowVersion="lowVersionEls"/>
      <get-phone-layer v-if="isGetPhoneLayer" @updatePhoneInfo="initPhoneLayer"/>
    </template>
    <template v-if="getCustomerId && !getWholesaleAuthority">
      <!-- <get-limit-info v-if="isGetLimitInfo"/> -->
      <get-phone-layer v-if="isGetPhoneLayer" @updatePhoneInfo="initPhoneLayer"/>
    </template>
    <!-- 自定义头部 -->
    <div class="top-nav" :class="'top-nav-' + typePage" :style="'height: '+ spaceBarHeight + 'px;background:#FF6529'">
      <div class="flex v-align-c top-name-bar" :style="'padding-top: '+ statusBarTop + 'px;color:#fff;justify-content:center'">
        个人中心
      </div>
    </div>
    <div class="header-wrap" v-if="fileSpace" :style="'background-image:url('+ fileSpace + '/images/w-login-bg.jpg'">
      <div class="v-align-c pad-l-14.5 pad-t-7.5">
        <!-- <img v-if="memberInfo.avatar" :src="memberInfo.avatar" class="avatar-img" alt=""> -->
        <img v-if="fileSpace" class="avatar-img" :src="getCustomerId ? memberInfo.avatar : fileSpace + '/images/default-avatar.png'" alt="">
        <span class="font-white font-18 mar-l-12" v-text="getCustomerId ? memberInfo.nickname : '登录/注册'"></span>
        <!-- <span class="font-white font-18 mar-l-12">{{memberInfo.nickname}}</span> -->
      </div>
      <div class="radius"></div>
    </div>
    <div class="bc-white pad-b-20">
      <div class="flex flex-between pad-l-30 pad-r-30">
        <div class="font-14">我的订单</div>
        <div @click="$pt.navigateTo({ url: '/pages/personal/order/main' })">
          <span class="font-12 font-color-9 mar-r-3.5">查看全部订单</span>
          <van-icon name="arrow" size="10px" />
        </div>
      </div>
      <div class="pancel-bar">
        <ul class="flex v-align-c buyer-o-list pad-t-20">
          <li class="flex-item pos-rel" @click="$pt.navigateTo({ url: '/pages/personal/order/main?type=wPay' })">
            <div v-if="unReadCount.unpaidUnreadProjectOrderNum" class="van-infos">{{ unReadCount.unpaidUnreadProjectOrderNum }}</div>
            <img v-if="fileSpace" :src="fileSpace + '/images/w-p-order-1.png'" class="width-27 height-24" alt="">
            <label>待付款</label>
          </li>
          <li class="flex-item pos-rel" @click="$pt.navigateTo({ url: '/pages/personal/order/main?type=wShipped' })">
            <div v-if="unReadCount.paidUnreadProjectOrderNum" class="van-infos">{{ unReadCount.paidUnreadProjectOrderNum }}</div>
            <img v-if="fileSpace" :src="fileSpace + '/images/w-p-order-2.png'" class="width-27 height-24" alt="">
            <label>待发货</label>
          </li>
          <li class="flex-item pos-rel" @click="$pt.navigateTo({ url: '/pages/personal/order/main?type=wReceive' })">
            <div v-if="unReadCount.deliveredUnreadProjectOrderNum" class="van-infos">{{ unReadCount.deliveredUnreadProjectOrderNum }}</div>
            <img v-if="fileSpace" :src="fileSpace + '/images/w-p-order-3.png'" class="width-27 height-24" alt="">
            <label>待收货</label>
          </li>
          <li class="flex-item pos-rel" @click="$pt.navigateTo({ url: '/pages/personal/order/refund-list/main' })">
            <div v-if="unReadRefundCount" class="van-infos">{{ unReadRefundCount }}</div>
            <img v-if="fileSpace" :src="fileSpace + '/images/w-p-order-5.png'" class="width-27 height-24" alt="">
            <label>退款/售后</label>
          </li>
        </ul>
      </div>
    </div>
    <div class="pancel-bar mar-t-9">
      <ul class="flex v-align-c buyer-o-list pad-t-20 pad-b-25">
        <li
          v-if="getShowBuyCard && veekrayStatus === 1"
          class="flex-item pos-rel"
          @click="$pt.navigateTo({url:'/pages/personal/purchase/main'})">
          <div v-if="unReadCount.receivedUnreadOrderGoodsNum" class="van-infos">{{ unReadCount.receivedUnreadOrderGoodsNum }}</div>
          <img v-if="fileSpace" :src="fileSpace + '/images/w-p-list-5.png'" class="width-30 height-30" alt="">
          <label>采购商品</label>
        </li>
        <li class="flex-item pos-rel" @click="$pt.navigateTo({url:'/pages/personal/address/main?urlFrom=personal'})">
          <img v-if="fileSpace" :src="fileSpace + '/images/w-p-list-6.png'" class="width-30 height-30" alt="">
          <label>收货地址</label>
        </li>
        <li class="flex-item pos-rel" v-if="enterpriseCustomerServiceAuthority === 1">
          <button open-type="contact" class="contactBtn hidden-submit button-icon" 
          :session-from="'7moor|'+ memberInfo.nickname + '|' + memberInfo.avatar +'|'+ customField"></button>
          <img v-if="fileSpace" :src="fileSpace + '/images/w-p-list-7.png'" class="width-30 height-30" alt="">
          <label>联系客服</label>
        </li>
        <li class="flex-item pos-rel" @click="$pt.navigateTo({url:'/pages/personal/feedback/main'})">
          <img v-if="fileSpace" :src="fileSpace + '/images/w-p-list-8.png'" class="width-30 height-30" alt="">
          <label>问题反馈</label>
        </li>
        <li class="flex-item pos-rel" v-if="getShowBuyCard && veekrayStatus !== 1">&nbsp;</li>
      </ul>
    </div>
    <div class="copy-right text-align-c pad-16 font-12">©{{ getAppInfo.appName }}  版本号：{{ getAppInfo.appVersion }}</div>
    <div v-if="!getCustomerId || !getPhone" @click="authInfo" style="width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(255,255,255,0);"></div>
  </div>
</template>
<script>
import GetUserInfo from '@/components/GetUserInfo'
import GetLimitInfo from '@/components/GetLimitInfo'
import GetPhoneLayer from '@/components/GetPhoneLayer'
import { getMemberInfo } from '@/api/home'
import { statOrderByMemberId, countAfterSaleNum, getEntityByMemberId } from '@/api/personal'
import { setNickName, setEnterpriseId, setCbFlag } from '@/utils/auth'
import { getAuthority } from '@/api/common'
export default {
  data() {
    return {
      getAppInfo: {},
      unReadCount: {},
      memberInfo: {},
      veekrayStatus: 0,
      unReadRefundCount: 0,
      isGetUserInfo: false,
      isGetLimitInfo: false,
      isGetPhoneLayer: false,
      spaceBarHeight: 0,
      statusBarTop: 0,
      customField: {},
      enterpriseCustomerServiceAuthority: 0, // 后台 企业客服增值功能是否开启 0：关闭 1：开启
      entityData: {}
    }
  },
  components: {GetUserInfo, GetLimitInfo, GetPhoneLayer},
  onLoad() {
    this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    this.statusBarTop = this.spaceBarHeight - 34
    this.getAuthority()
  },
  onShow() {
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
    this.getMemberInfo()
    this.statOrderByMemberId()
    this.countAfterSaleNum()
    this.getAuthority()
    this.getEntityByMemberId()
    // 清楚证件信息拷贝缓存设置
    this.$pt.removeStorageSync('copyBoolean')
    this.$pt.removeStorageSync('copyRealInfo')
  },
  methods: {
    lowVersionEls() {
      this.$pt.showTabBar({
        animation: false
      })
    },
    // 获取 企业客服是否开启
    getAuthority() {
      getAuthority().then(res => {
        this.enterpriseCustomerServiceAuthority = res.data.enterpriseCustomerServiceAuthority
      }).catch(err => {
        console.log(err)
      })
    },
    // 在授权页点击返回按钮 显示正常页面
    showPage() {
      this.isGetUserInfo = false
      this.$pt.showTabBar({
        animation: false
      })
    },
    authPhoneInfo() {
      this.isGetPhoneLayer = true
      this.getMemberInfo()
      this.$pt.showTabBar({
        animation: false
      })
    },
    getMemberInfo() {
      getMemberInfo(this.getCustomerId).then(response => {
        // console.log(response)
        if (response.isError) return
        this.memberInfo = response.data
        this.memberInfo.nickname = this.$utils.getStrByLength(this.memberInfo.nickname, 13)
        // veekrayStatus 萤火微客注册状态 -1:未注册 0:免费名片 1:付费名片
        this.veekrayStatus = response.data.veekrayStatus
        setNickName(response.data.nickname)
        if (response.data.enterpriseId) {
          setEnterpriseId(response.data.enterpriseId)
        }
      })
    },
    getEntityByMemberId() {
      // 企业配置信息，可获取增值业务是否开启
      // 用来判断申请店播展示
      getEntityByMemberId({
        memberId: this.getCustomerId || ''
      }).then((response) => {
        // console.log(response)
        if (response.isError) return
        this.entityData = response.data
        if (this.entityData.crossBorderBusinessFlag) {
          setCbFlag(this.entityData.crossBorderBusinessFlag)
        } else {
          setCbFlag(0)
        }
      })
    },
    statOrderByMemberId() {
      let memberTypeVal = 2 // 2：买家  1卖家
      if (!this.getShowBuyCard) return
      statOrderByMemberId({
        memberId: this.getCustomerId || this.getMemberId,
        memberType: memberTypeVal
      }).then(response => {
        if (response.isError) return
        this.unReadCount = response.data
      })
    },
    countAfterSaleNum() {
      if (!this.getShowBuyCard) return
      countAfterSaleNum({customerMemberId: this.getCustomerId || this.getMemberId}).then(response => {
        if (response.isError) return
        this.unReadRefundCount = response.data
      }).catch(() => {
      })
    },
    initPhoneLayer() {
      this.isGetPhoneLayer = false
    },
    authInfo() {
      if (!this.getCustomerId) {
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
        this.$pt.hideTabBar({
          animation: false
        })
      } else {
        if (!this.getPhone) {
          this.isGetPhoneLayer = true
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.header-wrap{
  position: relative;
  overflow: hidden;
  background-position: 100% 100%;
  height: 190rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  .radius{
    border-radius: 50%;
    width: 633px;
    height: 251px;
    background: white;
    position: absolute;
    left: -130px;
    bottom: -225px;
  }
  .avatar-img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: white;
  }
}
.pancel-bar{
  padding: 0 15px;
  background: #fff;
  // border-radius: 12px;
  // box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
  position: relative;
  z-index: 5;
  &.none-radius{
    border-radius: 0;
    box-shadow: 0 0 0;
  }
  .tabs-box{
    padding-right: 40%;
    border-bottom: #f1f1f1 1px solid;
    .van-infos{
      position: absolute;          
      top: 3px;
      z-index: 20;
      &.we-infos{
        left: 24%;
      }
      &.sell-infos{
        left: 54%;
      }
    }
  }
  ul{
    &.sell-o-list{
      li{
        &:nth-child(2), &:nth-child(3), &:nth-child(4){
          .van-infos{
            left: 57%!important;
          }
        }
        .van-infos{
          position: absolute;
          left: 62%;
          top: -5px;
        }
      }
    }
    &.buyer-o-list{
      li{
        &:nth-child(1){
          .van-infos{
            left: 58%!important;
          }
        }
        &:nth-child(4){
          .van-infos{
            left: 56%!important;
          }
        }
        .van-infos{
          position: absolute;
          left: 60%;
          top: -5px;
        }
      }
    }
    li{
      text-align: center;
      img{
        display: inline-block;
      }
      label{
        display: block;
        font-size: 12px;
        // margin-top: -3px;
      }
    }
  }    
}
.van-infos{
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  font-family: PingFang SC,Helvetica Neue,Arial,sans-serif;
  text-align: center;
  box-sizing: border-box;
  padding: 0 3px;
  min-width: 16px;
  line-height: 14px;
  border: 1px solid #fff;
  border-radius: 16px;
  background-color: #ff1d1d;
  -webkit-transform: translateX(0)!important;
  transform: translateX(0)!important;
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
}
.copy-right{
  color: #C5C5C5;
}
.bc-white{
  background: white;
}
.contactBtn{
  background-color: transparent!important;
  position: absolute;
  width:100%;
  height:100%;
  left: 0;
  top: 0;
  border-color: transparent!important;
  border: none!important;
}
</style>
